@import "variables";
@import "mixin";

[v-cloak]{
  display:none
}

.clearfix {
  @include clearfix
}

.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

.ellipsis {
  @include ellipsis;
}
  
[class*='mhairline'] {
  position: relative;

  &::after {
    @include mhairline;
  }
}
  
.mhairline {
  &--top::after {
    border-top-width: 1px;
  }

  &--left::after {
    border-left-width: 1px;
  }

  &--right::after {
    border-right-width: 1px;
  }

  &--bottom::after {
    border-bottom-width: 1px;
  }

  &--top-bottom::after {
    border-width: 1px 0;
  }

  &--surround::after {
    border-width: 1px;
  }
}

.menu-top {
  background: #fff;
  display: flex;
  padding: .24rem 0;
  .menu-top-item {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    color: #333;
    height: .9rem;
    &:active {
      background: #ececec;
    }
    &::after {
      content: " ";
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
      bottom: 0;
      border-right: 1px solid #ddd;
      color: #D9D9D9;
      -webkit-transform-origin: 100% 0;
      transform-origin: 100% 0;
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
    }
    .menu-top-item-l {
      color: $primary-color;
      .menu-icon {
        width: .9rem;
        line-height: 1;
        margin: 0;
        padding: 0;
        vertical-align: top;
      }
    }
    .menu-top-item-r {
      margin-left: .16rem;
      line-height: 1.6;
      .menu-top-label {
        font-size: .32rem;
        color: #333;
      }
      .menu-top-des {
        font-size: .24rem;
        color: #999;
      }
    }
  }
}

.pane-home {
  position: relative;
  margin-top: .3rem;
  background-color: #fff;
  padding-bottom: .36rem;
  .pane-home-h {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 0.36rem .2rem;
    padding-bottom: 0.28rem;
    height: 1rem;
    .title {
      flex: 1;
      font-size: .32rem;
      color: #333;
      line-height: 1;
      padding-left: .18rem;
    }
    .more {
      font-size: .28rem;
      color: #666;
      margin-top: -0.1rem;
    }
  }
}

.pane-home {
  &.rcd-home {
    margin-top: 0;
    .pane-home-h {
      .title {
        text-align: center;
        // position: relative;
        // width: 2rem;
        // &::after {
        //   content: "";
        //   display: inline-block;
        //   position: absolute;
        //   left: 0;
        //   top: 50%;
        //   height: 2px;
        //   width: 100%;
        //   background-color: #e5e5e5;
        // }
      }
    }
  }
}

.cate-home {
  padding: 0;
  .cate-home-item {
    float: left;
    width: 25%;
    padding: .16rem 0;
    text-align: center;
    &:active {
      background: #ececec;
    }
    .cate-home-item-icon {
      height: .96rem;
      .icon {
        font-size: .48rem;
        margin-right: .2rem;
      }
      img {
        height: .76rem;
        vertical-align: top;
      }
    }
    .cate-home-item-label {
      font-size: .28rem;
      line-height: 1;
    }
  }
}

.pro-rcd-list {
  list-style: none;
  margin: 0;
  .pro-rcd-item {
    width: 3.6rem;
    float: left;
    font-size: .28rem;
    // box-shadow: 0px 4px 6px #ececec;
    margin-left: .1rem;
    margin-bottom: .1rem;
    background: #fff;
    border-radius: .1rem;
    overflow: hidden;
    &:active {
      box-shadow: 0px 15px 20px #ececec;
    }
    .pro-rcd-img {
      height: 3rem;
      text-align: center;
      img {
        height: 3rem;
        width: 100%;
        height: 100%;
      }
    }
    .pro-rcd-name {
      @include multi-ellipsis(2);
      font-size: .28rem;
      height: .76rem;
      overflow: hidden;
      color: #333;
    }
    .pro-rcd-item-f {
      padding: .16rem .2rem 0.26rem 0.2rem;
      .pro-rcd-item-fb {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 1;
        margin-top: .16rem;
      }
      .price {
        color: red;
        font-size: .32rem;
      }
      .des {
        color: #999;
        font-size: .24rem;
      }
    }
  }
}

.badge-zy {
  color: #fff;
  font-size: 10px;
  position: relative;
  display: inline-block;
  border-radius: 1000px;
  line-height: 1;
  padding: 3px 6px;
  white-space: nowrap;
  background-color: $primary-color;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  vertical-align: middle;
}

.filterbar {
  position: relative;
  display: flex;
  background: #fff;
  height: 1.1rem;
  font-size: .28rem;
  >li {
      position: relative;
      flex: 1;
      list-style: none;
      text-align: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
      line-height: 1.3;
      &.selected {
        .filter-label {
          color: $primary-color;
          &::after {
            border-top-color: $primary-color;
            transform: rotate(180deg)
          }
        }
      }
      .filter-label {
        color: #999;
        position: relative;
        &::after {
          content: " ";
          position: absolute;
          right: -0.26rem;
          top: 0.12rem;
          border-top: .12rem solid #999;
          border-left: .1rem solid transparent;
          border-right: .1rem solid transparent;
        }
      }
  }
}

.filterbar-wrap {
  position: relative;
  z-index: 10;
}

.filterbarpop-wrap {
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 10;
  .filterbarpop {
      height: 8rem;
      background: #fff;
      z-index: 12;
      overflow-y: scroll;
      overflow-x: hidden;
      ul {
          font-size: .32rem;
          li {
              position: relative;
              padding: .12rem;
              // @extend .boder-t;
          }
      }
  }
}

.pro-filter-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(#000000, 0.4);
  left: 0;
  background: rgba(#000000, 0.4)
}